<%@page language="java" import="java.util.*" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@include file="/WEB-INF/pages/common/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>陇上无限学——陇南情Malron</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" href="${basePath}/resources/css/layout.css"/>
	<%@include file="/WEB-INF/pages/common/common.jsp"%>
	<script type="text/javascript" src="${basePath}/resources/js/menu.js"></script>
	<script type="text/javascript" src="${basePath}/resources/js/search.js"></script>
	<script src="${basePath}/resources/js/echart/echarts.js"></script>
	<script src="${basePath}/resources/js/echart/echarts-all.js"></script>
 </head>
 <body>
	<div class="wrap">
		<%@include file="/WEB-INF/pages/common/menu.jsp"%>
		<div class="content">
			<div class="header">
				<ul class="fl">
					 <li class="titems"><a href="javascript:void(0);"><i class="fa fa-user"></i>欢迎keke来到cms后台</a></li>
					 <li class="titems"><a href="javascript:void(0);"><i class="fa fa-envelope"></i>消息5个!</a></li>
					 <li class="titems"><a href="javascript:void(0);"><i class="fa fa-cog"></i>设置</a></li>
					 <li class="titems"><a href="${basePath}/logout"><i class="fa fa-share-alt"></i>退出</a></li>	
				</ul>
				<div class="fr sbtn none">
					<input type="text" class="fl" placeholder="搜索的关键字..."/><a href="#" class="fl"><i class="fa fa-search "></i></a>
				</div>
			</div>
			<div class="cnt tztab">
					<div class="htitle"> 首页  &gt; 日记管理</div>
					<select onchange="loadData(this.value)">
						<option>请选择年份</option>
						<c:forEach begin="2010" end="2020" var="year">
							<option value="${year}">${year}</option>	
						</c:forEach>
					</select>
					<div class="tabwrap" id="main" style="height:538px"></div>	
			</div>
		</div>
	</div>
	 <script>
	 
	$(function(){
		loadData(new Date().getFullYear());
	});
 
	 function loadData(year){
		 $.ajax({
	 		type:"post",
	 		url:"http://localhost/marlon_spring/admin/echart/courselist",
	 		data:{year:year},
	 		success:function(data){
	 			var json = {
					title :year+ '年陇上无限学VIP用户详情',
					datas:parseData(data)
				};
	 			initChart("main",json);
	 		}
		 });
	 }
	
	 //json数据的处理	 
	 function parseData(jsonArr){
			var jsonObj = {};
			for(var key in jsonArr){
				var num = jsonArr[key].num;
				var m = jsonArr[key].m;
				jsonObj["s"+parseInt(m)]= num;
			};
			var arr = [];
			for(var i=1;i<=12;i++){
				arr.push(jsonObj["s"+i]||0);
			}
			return arr;
		}
	 
	//初始化报表
	function initChart(targetId,json){
		var myChart = echarts.init(document.getElementById(targetId));
		var option = {
		    title : {
		    	x : "center",//居中显示
		        text: json.title,
		        subtext: '纯属虚构'
		    },
		    tooltip : {
		        trigger: 'axis'
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            dataView : {show: true, readOnly: false},
		            magicType : {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
		    //X轴显示信息
		    xAxis : [
		        {
		            type : 'category',//
		            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
		        }
		    ],
		    //Y轴显示信息
		    yAxis : [
		        {
		            type : 'value'//代表数字显示
		        }
		    ],
		    series : [
		        {
		            name:'学员人数',//提示显示
		            type:'bar',
		            data:json.datas,
		            markPoint : {
		                data : [
		                    {type : 'max', name: '最大值'},
		                    {type : 'min', name: '最小值'}
		                ]
		            },
		            markLine : {
		                data : [
		                    {type : 'average', name: '平均值'}
		                ]
		            }
		        }
		    ]
		};
		myChart.setOption(option);
	};
    </script>
 </body>
</html>


		